import React, {Component} from 'react'
import {
  Card,
  Icon,
  List
} from 'antd'

import LinkButton from '../../components/link-button'
import {BASE_IMG_URL} from '../../utils/constants'

const Item = List.Item


/*
Product的详情子路由组件
 */
export default class BannerDetail extends Component {



  render() {

    // 读取携带过来的state数据
    const {link, detail, imgs} = this.props.location.state.banner

    const title = (
      <span>
        <LinkButton>
          <Icon
            type='arrow-left'
            style={{marginRight: 10, fontSize: 20}}
            onClick={() => this.props.history.goBack()}
          />
        </LinkButton>

        <span>轮播详情</span>
      </span>
    )
    return (
      <Card title={title} className='product-detail'>
        <List>
          <Item>
            <span className="left">轮播链接:</span>
            <span>{link}</span>
          </Item>


          <Item>
            <span className="left" style={{width:'100px',height: '100px'}}>轮播图片:</span>
            <span>
              {
                imgs.map(imgs => (
                    <img
                        key={imgs}
                        src={BASE_IMG_URL + imgs}
                        className="product-img"
                        alt="img"
                    />
                ))
              }
            </span>
          </Item>


        </List>
      </Card>
    )
  }
}
